<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入vue文件-->
    <script src = "js/vue.js"></script>
</head>
<body>
    <!--创建一个容器-->
    <div id="app">
         <!-- <myCom></myCom>  报错的 -->
         <!-- <mycom></mycom>   报错的，因为没有注册一个标签名叫小写的mycom -->
         <my-com></my-com>   <!--正确的访问方式-->
         <stu-com></stu-com>
    </div>
   
    <script>
        /*
          命名规则
        */
        //创建组件myCom
        let myCom = {
            template: `<div>
                    我是组件com1:
                </div>`,
        }

        //创建全局组件 stu-com
        Vue.component("stu-com",{
            template: `<div>全局组件</div>`
        })

        //创建一个控制器，控制容器显示的数据
        let vm = new Vue({
            el: '#app' ,  //控制那个容器
            components:{
                myCom       //此处注册myCom
            }
        })
    </script>
</body>
</html>